<template>
  <div>
    <van-nav-bar title="标题">
      <template #left>
        <van-icon name="arrow-left" color="white" @click="$router.back()" />
      </template>
      <template #title>
        <div class="city-title">地图找房</div>
      </template>
    </van-nav-bar>
    <div id="container"></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'map-page',
  async mounted() {
    const { BMapGL } = window
    const map = new BMapGL.Map('container')
    const obj = JSON.parse(window.localStorage.getItem('cinfo'))
    // 设置地图中心点
    // const point = new BMapGL.Point(116.404, 39.915)
    // map.centerAndZoom(point, 15)
    const cityName = obj ? obj.label + '市' : '北京市'
    const cityValue = obj ? obj.value : 'AREA|88cff55c-aaa4-e2e0'
    console.log(cityName)
    map.centerAndZoom(cityName, 12) // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放

    // 求数据
    const res = await axios.get(
      'http://liufusong.top:8080/area/map?id=' + cityValue
    )
    console.log(res)

    res.data.body.forEach((item) => {
      const point = new BMapGL.Point(item.coord.longitude, item.coord.latitude)
      const content = item.label + '<br>' + item.count
      const label = new BMapGL.Label(content, {
        // 创建文本标注
        position: point, // 设置标注的地理位置
        offset: new BMapGL.Size(10, 20) // 设置标注的偏移量
      })
      map.addOverlay(label) // 将标注添加到地图中

      label.setStyle({
        // 设置label的样式
        color: '#fff',
        backgroundColor: 'green',
        fontSize: '14px',
        borderRadius: '50%',
        width: '60px',
        height: '60px',
        padding: '20px',
        textAlign: 'center',
        border: '2px solid #1E90FF'
      })

      label.addEventListener('click', async function () {
        const point = new BMapGL.Point(
          item.coord.longitude,
          item.coord.latitude
        )
        map.centerAndZoom(point, 15)
        map.clearOverlays() // 移除覆盖物
        const res = await axios.get(
          'http://liufusong.top:8080/area/map?id=' + item.value
        )
        console.log(res)

        res.data.body.forEach((item) => {
          const point = new BMapGL.Point(
            item.coord.longitude,
            item.coord.latitude
          )
          const content = item.label + '<br>' + item.count
          const label = new BMapGL.Label(content, {
            // 创建文本标注
            position: point, // 设置标注的地理位置
            offset: new BMapGL.Size(10, 20) // 设置标注的偏移量
          })
          map.addOverlay(label) // 将标注添加到地图中

          label.setStyle({
            // 设置label的样式
            color: '#fff',
            backgroundColor: 'green',
            fontSize: '14px',
            borderRadius: '50%',
            width: '60px',
            height: '60px',
            padding: '20px',
            textAlign: 'center',
            border: '2px solid #1E90FF'
          })

          label.addEventListener('click', async function () {
            const point = new BMapGL.Point(
              item.coord.longitude,
              item.coord.latitude
            )
            map.centerAndZoom(point, 15)
            map.clearOverlays() // 移除覆盖物

            const res = await axios.get(
              'http://liufusong.top:8080/area/map?id=' + item.value
            )
            console.log(res)

            res.data.body.forEach((item) => {
              const point = new BMapGL.Point(
                item.coord.longitude,
                item.coord.latitude
              )
              const content = item.label + '<br>' + item.count
              const label = new BMapGL.Label(content, {
                // 创建文本标注
                position: point, // 设置标注的地理位置
                offset: new BMapGL.Size(10, 20) // 设置标注的偏移量
              })
              map.addOverlay(label) // 将标注添加到地图中

              label.setStyle({
                // 设置label的样式
                color: '#fff',
                backgroundColor: 'green',
                fontSize: '14px',
                borderRadius: '50%',
                width: '60px',
                height: '60px',
                padding: '20px',
                textAlign: 'center',
                border: '2px solid #1E90FF'
              })
            })
          })
        })
      })
    })
  },
  data() {
    return {}
  }
}
</script>

<style scoped lang="less">
#container {
  height: 100vh;
}
</style>
